
/*
 * mapControl is a simple template that shows a map and a edit button
 * call the updateControl method to update the map  
 */
App.control.mapControl = Ext.extend(Ext.Panel, {
	// add tplMarkup as a new property
	tplMarkup: [
		'<img src={url} /><br/>'
	],
	data: null,
	// startingMarup as a new property
	startingMarkup: '<img src="http://maps.google.com/maps/api/staticmap?center=40.001703,-83.019716&zoom=14&size=400x300&maptype=roadmap&sensor=false" width=350 height=250/>',
	// override initComponent to create and compile the template
	// apply styles to the body of the panel and initialize
	// html to startingMarkup
	initComponent: function() {
		this.tpl = new Ext.Template(this.tplMarkup);
		
		
		Ext.apply(this, {

			
			frame: false,
			html: this.startingMarkup
		});
		// call the superclass's initComponent implementation
		App.control.mapControl.superclass.initComponent.call(this);

	},
	load_mask: function(msg){
		this.body.update(this.startingMarkup)
	},
	// add a method which updates the details
	/*
	 * polygon: string geojson format: {"type":"Polygon","coordinates":[[[-83.020916781754,40.002161106657],[-83.020648560853,40.002621341393],[-83.020208678574,40.002950078591],[-83.019741974205,40.003073354632],[-83.018846116395,40.002908986528],[-83.018374047608,40.002013173405],[-83.018910489412,40.000426980057],[-83.01995118651,40.000381777115],[-83.021024070116,40.000681759709],[-83.020916781754,40.002161106657]]]};
	 * pt: array [x, y]
	 */
	updateControl: function(polygon, pt) {
		this.data = {polygon: polygon, center: pt};
		//generate a google static map url
		var url;
		var path = [];
		
		var x = Ext.util.JSON.decode(polygon);//geojson format, //x = 
		for (var i=0; i<x.coordinates[0].length; i++){
			var xy = x.coordinates[0][i];
			path.push([xy[1] + ',' + xy[0]])
		}
		
		var path_str = path.join('|');
		
		
		
		url = 'http://maps.google.com/maps/api/staticmap?size=' + this.width +'x' + this.height + '&path=fillcolor:blue|color:0xFFFFFF00|' + path_str + '&sensor=false&markers=color:blue|' + pt[1] + ',' + pt[0];
		
		data = {url: url, width: this.width, height: this.height-20};
		var w = this.width;
		this.tpl.overwrite(this.body, data);
	}
});

Ext.reg('app_mapcontrol', App.control.mapControl);